<template>
  <view class="container">
    <!-- 自定义头部 -->
    <!-- <view class="custom-header" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="header-content">
        <view class="header-left" @click="goBack">
          <text class="icon-back">‹</text>
        </view>
        <view class="header-title">晶蕴集萃 寻香探微</view>
        <view class="header-right" @click="showMore">
          <text class="icon-more">⋯</text>
        </view>
      </view>
    </view> -->
    
    <!-- 主要内容 -->
    <scroll-view scroll-y class="main-content">
      <!-- 产品图片轮播 -->
      <view class="product-images">
        <swiper 
          class="swiper" 
          :autoplay="false" 
          :interval="3000" 
          :duration="500"
          @change="onSwiperChange"
        >
          <swiper-item v-for="(image, index) in productData.images" :key="index">
            <image :src="image" mode="aspectFit" class="product-image"></image>
          </swiper-item>
        </swiper>
        <view class="image-indicator">{{ currentImageIndex + 1 }}/{{ productData.images.length }}</view>
      </view>
      
      <!-- 产品基本信息 -->
      <view class="product-basic-info">
        
        <view class="product-title">{{ productData.subTitile }}</view>
        <view class="product-name">{{ productData.name }}</view>
        <view class="product-price">¥{{ productData.price }}</view>
        <view class="stock-info">
          <view :class="['stock-status', productData.stockClass]">{{ productData.stock }}</view>
          <view class="stock-detail">库存数量充足，下单后预计24小时内发货， <br />以实际发货时间为准。</view>
        </view>
      </view>
      
      <!-- 商品信息 -->
      <view class="product-details">
        <view class="section-title">商品信息</view>
        <view class="section-shuom">商品说明</view>
        <view class="detail-item" v-for="(item, index) in productData.details" :key="index">
          <view class="detail-label">{{ item.label }}</view>
          <view class="detail-value">{{ item.value }}</view>
        </view>
      </view>
      
      <!-- 规格参数 -->
      <view class="product-specs">
        <view class="section-shuom">规格参数</view>
        <view class="spec-item" v-for="(spec, index) in productData.specs" :key="index">
          <view class="spec-label">{{ spec.label }}</view>
          <view class="spec-value">{{ spec.value }}</view>
        </view>
      </view>
      
      <!-- 品牌服务 -->
      <view class="brand-service noafter">
        <view class="section-title">品牌服务</view>
        <view class="section-shuom">礼品包装</view>
        <view class="service-item">
          <view class="service-images">
            <image 
              v-for="(image, index) in productData.bzImgUrl" 
              :key="index"
              :src="image" 
              mode="widthFix" 
              class="service-image"
            ></image>
          </view>
        </view>
      </view>
      
      <!-- 底部占位 -->
      <view class="bottom-placeholder"></view>
    </scroll-view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="left-icons">
        <view class="icon-gift" @click="showGiftOptions">
          <image src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/gift-b.svg" mode="widthFix" class="gift-icon"></image>
        </view>
        <view class="icon-cart" @click="goToCart">
          <image src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/cart-b.svg" mode="widthFix" class="cart-icon"></image>
          <view class="cart-badge">{{ cartCount }}</view>
        </view>
      </view>
      <view class="action-buttons">
        <button class="btn-cart" @click="addToCart">放入购物车</button>
        <button class="btn-buy" @click="buyNow">立即下单</button>
      </view>
    </view>
  </view>
</template>

<script>
import { productApi } from '@/request/api.js'
import cartManager from '@/utils/cart'
import authManager from '@/utils/auth'

export default {
  data() {
    return {
      statusBarHeight: 0,
      headerHeight: 0,
      currentImageIndex: 0,
      productId: '',
      cartCount: 0,
      userInfo: {},
      productData: {
        images: [],
      }
    }
  },
  onLoad(options) {
    this.productId = options.id || '';
    this.initPage();
    this.loadProductData();
  },
  methods: {
    initPage() {
      // 获取状态栏高度
      const systemInfo = uni.getSystemInfoSync();
      // this.userInfo = authManager.getUserInfo()
      this.statusBarHeight = systemInfo.statusBarHeight;
      this.headerHeight = this.statusBarHeight + 44;
      cartManager.addListener(this.getCartCount)
      this.getCartCount()
    },
    getCartCount() {
      this.cartCount = cartManager.getTotalQuantity()
    },
    
    async loadProductData() {
      if (!this.productId) return;
      
      try {
        // 这里应该调用实际的API接口获取产品详情
        // const res = await this.$api.getProductDetail(this.productId);
        // this.productData = res.data;
        productApi.getProductDetail(this.productId).then(res => {
          const productData = {
            ...res,
            images: res.bannerUrl?.split(",") || [],
            stock: res.stock === 0 ? '无货' : res.stock <= 50 ? '库存紧张' : '有货',
            stockClass: res.stock === 0 ? 'out-of-stock' : res.stock <= 50 ? 'low-stock' : 'in-stock',
            details: res.detail ? JSON.parse(res.detail) : [],
            specs: res.specification ? JSON.parse(res.specification) : [],
            bzImgUrl: res.bzImgUrl?.split(',')
          }
          this.productData = { ...productData }
        })
        

      } catch (error) {
        console.error('加载产品数据失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      }
    },
    
    onSwiperChange(e) {
      this.currentImageIndex = e.detail.current;
    },
    
    goBack() {
      uni.navigateBack();
    },
    
    showMore() {
      uni.showActionSheet({
        itemList: ['分享', '收藏'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.shareProduct();
          } else if (res.tapIndex === 1) {
            this.collectProduct();
          }
        }
      });
    },
    
    shareProduct() {
      // 分享功能
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      });
    },
    
    collectProduct() {
      // 收藏功能
      uni.showToast({
        title: '已收藏',
        icon: 'success'
      });
    },
    
    addToCart() {
      if (this.productData.stockClass === 'out-of-stock') {
        uni.showToast({
          title: '商品已售罄',
          icon: 'none'
        });
        return;
      }

      cartManager.addItem(this.productData)
      
      // 加入购物车逻辑
      uni.showToast({
        title: '已添加到购物车',
        icon: 'success'
      });
    },
    
    buyNow() {
      if (this.productData.stockClass === 'out-of-stock') {
        uni.showToast({
          title: '商品已售罄',
          icon: 'none'
        });
        return;
      }
      const product = {
        id: this.productData.id,
        name: this.productData.name,
        price: this.productData.price,
        image: this.productData.listImg,
        quantity: 1
      }
      const productStr = encodeURIComponent(JSON.stringify(product))
      uni.navigateTo({
        url: '/pages/order/index?productStr=' + productStr
      });
      
      // 立即购买逻辑
    //   uni.showToast({
    //     title: '正在跳转支付...',
    //     icon: 'loading'
    //   });
    },
    
    showGiftOptions() {
      // 显示礼品包装选项
      // uni.showActionSheet({
      //   itemList: ['精美礼盒包装', '简约包装', '不需要包装'],
      //   success: (res) => {
      //     const options = ['精美礼盒包装', '简约包装', '不需要包装'];
      //     uni.showToast({
      //       title: `已选择：${options[res.tapIndex]}`,
      //       icon: 'success'
      //     });
      //   }
      // });
      // 跳转商城页面
      uni.switchTab({
        url: '/pages/mall/index'
      });
    },
    
    goToCart() {
      // 跳转到购物车页面
      uni.switchTab({
        url: '/pages/cart/index'
      });
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  min-height: 100vh;
}

.custom-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 999;
  
  .header-content {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    
    .header-left, .header-right {
      width: 88rpx;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .icon-back, .icon-more {
        font-size: 36rpx;
        color: #333333;
      }
    }
    
    .header-title {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }
  }
}

.main-content {
  height: calc(100vh - 120rpx);
  padding-bottom: 110rpx;
}

.product-images {
  position: relative;
  background-color: #ffffff;
  
  .swiper {
    height: 585rpx;
  }
  
  .product-image {
    width: 100%;
    height: 100%;
  }
  
  .image-indicator {
    position: absolute;
    bottom: 20rpx;
    right: 50%;
    transform: translateX(50%);
    // background-color: rgba(0, 0, 0, 0.5);
    color: #000;
    padding: 8rpx 16rpx;
    font-size: 24rpx;
  }
}

.product-basic-info {
  background-color: #ffffff;
  padding: 40rpx 30rpx;

  .product-title {
    font-size: 24rpx;
    margin-bottom: 30rpx;
    padding-left: 20rpx;
  }
  
  .product-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #000;
    margin-bottom: 20rpx;
    padding-left: 20rpx;
    line-height: 1.4;
  }
  
  .product-price {
    font-size: 48rpx;
    margin-bottom: 20rpx;
    padding-left: 20rpx;
  }
  
  .stock-info {
    padding-left: 20rpx;
    .stock-status {
      display: inline-block;
      padding: 8rpx 16rpx;
      font-size: 24rpx;
    padding-left: 0;
    color: #715091;
    }

    .stock-detail {
        font-size: 20rpx;
        color: #999;
        padding-left: 0;
        line-height: 32rpx;
        margin-top: 20rpx;
    }
  }
}

.product-details, .product-specs, .brand-service {
  background-color: #ffffff;
  padding: 60rpx 50rpx;
  position: relative;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #000;
    margin-bottom: 30rpx;
  }

  .section-shuom {
    color: #000;
    font-size: 24rpx;
    margin-bottom: 40rpx;
  }

  &::after {
    content: '';
    height: 1rpx;
    width: calc(100% - 120rpx);
    background-color: #ccc;
    position: absolute;
    bottom: 0;
  }

  &.noafter {
    &::after {
        display: none;
    }
  }
}

.detail-item, .spec-item {
  display: flex;
  margin-bottom: 24rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .detail-label, .spec-label {
    width: 160rpx;
    font-size: 22rpx;
    color: #808080;
    flex-shrink: 0;
  }
  
  .detail-value, .spec-value {
    flex: 1;
    font-size: 22rpx;
    color: #010101;
    line-height: 1.5;
  }
}

.service-item {
  .service-title {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 20rpx;
  }
  
  .service-images {
    
    .service-image {
      width: 100%;
    }
  }
}

.bottom-placeholder {
  height: 140rpx;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 150rpx;
  
  .left-icons {
    display: flex;
    align-items: center;
    gap: 20rpx;
    
    .icon-gift, .icon-cart {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    
    .gift-icon, .cart-icon {
      width: 30rpx;
    }
    
    .cart-badge {
      position: absolute;
      transform: translateX(50%) translateY(-60%);
      top: 0;
      right: 50%;
      background-color: #1F2937;
      border-radius: 30rpx;
      height: 32rpx;
      padding: 0 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 20rpx;
      font-weight: bold;
    }
  }
  
  .action-buttons {
    display: flex;
    gap: 20rpx;
    margin-right: 45rpx;
    
    .btn-cart, .btn-buy {
      height: 66rpx;
      border: none;
      border-radius: 0;
      font-size: 28rpx;
      font-weight: 500;
      width: 238rpx;
      line-height: 66rpx;
      text-align: center;
      
      &::after {
        border: none;
      }
    }
    
    .btn-cart {
      background-color: #ffffff;
      color: #000000;
      border: 2rpx solid #000000;
    }
    
    .btn-buy {
      background-color: #000000;
      color: #ffffff;
    }
  }
}
</style>
